<template>
	<view class="order">
		<view class="nav flex_center">
			
			<view class="back">
				<u-icon name="arrow-left" size="40rpx" @click="$native.backAction()"></u-icon>
				<!--  -->
			</view>

			<view class="search flex_r_around" v-if="type == 1">
				<u-search :showAction="true" actionText="搜索" :actionStyle="{
					width: '120rpx',
					height: '56rpx',
					background: '#FD2A53',
					borderRadius: '36rpx',
					fontWeight: '500',
					fontSize: '24rpx',
					color: '#FFFFFF',
					lineHeight: '56rpx',
					textAlign: 'center',
				}" :animation="false" @search="onSearch" @custom="onSearch" v-model="key"></u-search>
			</view>

			<view class="nav-title flex_r_around" v-else>
				<text>活动</text>
			</view>


			<view class="back" @click="show_select = true" v-if="type == 1">
				<image :src="$util.prefix('store/icon_screen.png')"></image>
			</view>
			<view class="back" v-else></view>
		</view>

		<view class="nav_box"></view>

		<view class="type_tab flex_center">
			<view class="type_item flex_r_around" :id="type == 1 ? 'select' : ''" @click="onType(1)">
				<text>订单</text>
			</view>
			<view class="type_item flex_r_around" :id="type == 2 ? 'select' : ''" @click="onType(2)">
				<text>活动</text>
			</view>
			<!-- <view class="type_item flex_r_around" :id="type == 3 ? 'select' : ''" @click="onType(3)">
				<text>卡券订单</text>
			</view> -->
		</view>

		<scroll-view scroll-x="true" class="scroll_tab" v-if="type == 1">
			<view class="tab flex_center">
				<view class="tab_item" @click="onTab(0)">
					<text>全部</text>
					<view class="select_bg" :id="status == 0 ? 'select' : ''"></view>
				</view>
				<!-- <view class="tab_item" @click="onTab(1)">
					<text>待支付</text>
					<view class="select_bg" :id="status == 1 ? 'select' : ''"></view>
				</view> -->
				<view class="tab_item" @click="onTab(2)">
					<text>待接单</text>
					<view class="select_bg" :id="status == 2 ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab('3,4')">
					<text>待完成</text>
					<view class="select_bg" :id="status == '3,4' ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab('5,6')">
					<text>已完成</text>
					<view class="select_bg" :id="status == '5,6' ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab(7)">
					<text>退款/售后</text>
					<view class="select_bg" :id="status == 7 ? 'select' : ''"></view>
				</view>
			</view>
		</scroll-view>

		<scroll-view scroll-x="true" class="scroll_tab" v-if="type == 3">
			<view class="tab flex_center">
				<view class="tab_item" @click="onTab(0)">
					<text>全部</text>
					<view class="select_bg" :id="status == 0 ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab(1)">
					<text>待完成</text>
					<view class="select_bg" :id="status == 1 ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab(2)">
					<text>交易失败</text>
					<view class="select_bg" :id="status == 2 ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab(3)">
					<text>已完成</text>
					<view class="select_bg" :id="status == 3 ? 'select' : ''"></view>
				</view>
			</view>
		</scroll-view>

		<empty v-if="!list.length"></empty>

		<view class="list" v-if="type == 1">
			<view class="item" v-for="(item,index) in list" :key="index"
				@click="$util.toUrl(`/pages/order/content?id=${item.id}`)">
				<view class="left flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view class="flex_r_between">
							<view class="hidden flex_1">{{item.name}}</view>
							<!-- 状态:1=未支付,2=待接单,3=待服务,4=服务中,5=已完成,6=已评价,7=已退款 -->
							<!-- return_status 1=未退款  2=申请中  3=已退款  4=驳回退款,5=商家同意退款 -->
							<view class="right" v-if="item.complain_status != 2 && item.complain_status != 3">
								{{
									item.status == 5 ? '已完成'
									: item.status == 6 ? '已评价'
									: item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 && item.kefu == 1 ? '服务中'
									: item.status == 3 && item.kefu == 2 ? '待发货'
									: item.status == 4 && item.kefu == 1 ? '服务中'
									: item.status == 4 && item.kefu == 2 ? '已发货'
									: item.status == 7 ? '已退款'
									: ''
								}}
							</view>
							<image v-else src="/static/store/tousu_status.png" mode="aspectFill" class="tousu_status">
							</image>
						</view>
						<view class="flex_r_between">
							<view class="text">下单时间：<uni-dateformat :date="item.create_time"
									format="yyyy-MM-dd hh:mm"></uni-dateformat></view>
							<view class="price">
								<i>￥</i>
								<text>{{item.pay_price}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 状态:1=未支付,2=待接单,3=待服务,4=服务中,5=已完成,6=已评价,7=已退款 -->
				<!-- return_status 1=未退款  2=申请中  3=已退款  4=驳回退款,5=商家同意退款 -->
				<view class="btn_view flex_center" v-if="item.status == 1">
					<view class="r" @click.stop="onPay(item)">立即支付</view>
					<view class="b" @click.stop="closeOrder(item)">取消订单</view>
				</view>

				<view class="btn_view flex_center"
					v-if="item.status == 2 && (item.return_status == 1 || item.return_status == 4)">
					<view class="b" @click.stop="closeOrder(item)">取消订单</view>
				</view>

				<view class="btn_view flex_center" v-if="item.status == 3">
					<view class="b" v-if="item.return_status == 1 || item.return_status == 4"
						@click.stop="onReturn(item)">
						申请退款</view>
					<view class="r" @click.stop="complateOrder(item)"
						v-if="(item.return_status == 1 || item.return_status == 4 || item.return_status == 2) && item.kefu == 1">
						完成订单</view>
				</view>

				<view class="btn_view flex_center" v-if="item.status == 4">
					<!-- <view class="b" v-if="item.return_status == 1 || item.return_status == 4"
						@click.stop="onReturn(item)">
						申请退款</view> -->
					<view class="r" @click.stop="complateOrder(item)"
						v-if="item.return_status == 1 || item.return_status == 4 || item.return_status == 2">
						{{ item.kefu == 1 ? '完成订单' : '确认收货' }}
					</view>
				</view>

				<view class="btn_view flex_center" v-if="item.status == 5">
					<!-- <view class="y" @click.stop="toReward(item)">打赏</view> -->
					<view class="y" @click.stop="buyAgain(item)">再次预定</view>
					<!-- <view class="b" v-if="item.complain_status == 1" @click.stop="toComplate(item)">
						投诉举报
					</view> -->
				</view>

			</view>
		</view>

		<view class="list" v-if="type == 2">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toActiveContent(item)">
				<view class="left flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view class="flex_r_between">
							<view class="hidden flex_1">{{item.title || ''}}</view>
							<!-- 1=未支付,2=已报名,3=已查看,4=已退款 -->
							<!-- 退款状态:1=未退款,2=申请退款,3=同意退款,4=拒绝退款 -->
							<view class="right" v-if="item.complain_status != 2 && item.complain_status != 3">
								{{
									item.status == 1 ? '未支付'
									: item.return_status == 2 ? '申请退款'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '拒绝退款'
									: item.status == 2 ? '已报名'
									: item.status == 3 ? '已查看'
									: item.status == 4 ? '已退款'
									: ''
								}}
							</view>
							<image v-else src="/static/store/tousu_status.png" mode="aspectFill" class="tousu_status">
							</image>
						</view>
						<view class="flex_r_between">
							<view class="text" v-if="item.end_time">有效期至：
								<uni-dateformat :date="item.end_time * 1000" format="yyyy-MM-dd hh:mm"></uni-dateformat>
							</view>
							<view class="text" v-else>
								<text>无限期</text>
							</view>
							<view class="price" v-if="Number(item.pay_num) == 0">
								<i></i>
								<text>免费</text>
							</view>
							<view class="price" v-else>
								<i>￥</i>
								<text>{{ item.pay_num }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="btn_view flex_center"
					v-if="(item.status == 2 || item.status == 3) && (item.return_status == 1 || item.return_status == 4) && Number(item.pay_num) > 0">
					<view class="b" @click.stop="returnActive(item)" v-if="getShowStatus(item)">申请退款</view>
				</view>

			</view>
		</view>

		<view class="list" v-if="type == 3">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toActiveContent(item)">
				<view class="left flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view class="flex_r_between">
							<view class="hidden flex_1">{{item.title || ''}}</view>
							<!-- 1=未支付,2=已报名,3=已查看,4=已退款 -->
							<!-- 退款状态:1=未退款,2=申请退款,3=同意退款,4=拒绝退款 -->
							<view class="right">
								状态
							</view>
						</view>
						<view class="flex_r_between">
							<view class="text">下单时间：
								<uni-dateformat :date="item.end_time * 1000" format="yyyy-MM-dd hh:mm"></uni-dateformat>
							</view>

							<view class="price">
								<i>￥</i>
								<text>{{ item.price }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="btn_view flex_center"
					v-if="(item.status == 2 || item.status == 3) && (item.return_status == 1 || item.return_status == 4) && Number(item.pay_num) > 0">
					<view class="b" @click.stop="returnActive(item)" v-if="getShowStatus(item)">申请退款</view>
				</view>

			</view>
		</view>

		<u-popup :safeAreaInsetBottom="false" :show="show_select" @close="show_select = false" bgColor="transparent">
			<view class="select_box">
				<view class="header flex_r_between">
					<view class="icon flex_r_between">

					</view>
					<text>订单筛选</text>
					<view class="icon flex_r_between" @click="show_select = false">
						<u-icon name="close" color="#131313" size="40rpx"></u-icon>
					</view>
				</view>

				<view class="title">下单时间</view>
				<view class="time_box flex_r_between">
					<view class="time_item" @click="start_show = true">
						<uni-dateformat :date="start" format="yyyy-MM-dd" v-if="start"></uni-dateformat>
						<text v-else>起始时间</text>
					</view>
					<view class="line"></view>
					<view class="time_item" @click="onEnd">
						<uni-dateformat :date="end" format="yyyy-MM-dd" v-if="end"></uni-dateformat>
						<text v-else>截止时间</text>
					</view>
				</view>


				<view class="title">商品类别</view>
				<view class="time_box flex_r_between">
					<view class="time_item hidden" @click="show = true">{{ category_pname || '请选择' }}</view>
					<view class="line"></view>
					<view class="time_item hidden" @click="show = true">{{ category_name || '请选择' }}</view>
				</view>

				<view class="btn_box flex_r_between">
					<view class="btn_item cancel" @click="onResetSelect">重置</view>
					<view class="btn_item confirm" @click="onConfirmSelect">确定</view>
				</view>

			</view>
		</u-popup>

		<u-picker keyName="name" :show="show" ref="uPicker" :columns="columns" @cancel="show = false"
			@close="show = false" @change="onColumnsChange" @confirm="onColumnsComfirm" :closeOnClickOverlay="true">
		</u-picker>

		<u-datetime-picker :show="start_show" mode="date" :maxDate="now" :closeOnClickOverlay="true"
			@close="start_show = false" @cancel="start_show = false" @confirm="confirmStart">
		</u-datetime-picker>

		<u-datetime-picker :maxDate="now" :minDate="start" :show="end_show" mode="date" :closeOnClickOverlay="true"
			@close="end_show = false" @cancel="end_show = false" @confirm="confirmEnd">
		</u-datetime-picker>

		<u-popup :safeAreaInsetBottom="false" :show="pay_show" mode="center" @close="pay_show = false"
			bgColor="transparent">
			<view class="pay_popup">
				<view class="icon flex_r_around">
					<image :src="$util.prefix('store/money_icon.png')"></image>
				</view>

				<view class="content flex_c">
					<view class="header" @click="pay_show = false">
						<u-icon name="close-circle" size="40rpx" color="#666"></u-icon>
					</view>

					<view class="title">
						项目总额
					</view>

					<view class="price flex_r_between">

						<view class="item flex_c">
							<text>订单总额</text>
							<view>￥{{ complate_item.service_price || '' }}</view>
						</view>

						<view class="item flex_c">
							<text>路费</text>
							<input type="digit" v-model="fare" @input="inputVerGame" placeholder="请输入"
								placeholder-class="input-placeholder"></input>
						</view>

					</view>

					<view class="pay_popup_btn flex_c" @click="toPayLast">
						<text>共需支付{{
							Number(fare).toFixed(2) || 0
						}}元</text>
						<view>路费</view>
					</view>
				</view>

			</view>
		</u-popup>

		<u-popup :safeAreaInsetBottom="false" :show="return_show" mode="center" @close="return_show = false"
			bgColor="transparent">
			<view class="return_popup">
				<view class="icon flex_r_around">
					<image :src="$util.prefix('store/money_icon.png')"></image>
				</view>

				<view class="content flex_c">

					<view class="title">
						{{ return_order.return_price }}
					</view>

					<view class="text">
						{{ return_order.return_msg }}
					</view>

					<view class="return_popup_btn flex_r_between">
						<view class="b" @click="returnOrder">
							继续申请
						</view>
						<view class="r" @click="return_show = false">
							取消
						</view>
					</view>
				</view>

			</view>
		</u-popup>

		<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_show" @close="to_pay_show = false"
			bgColor="transparent">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price flex_center" style="align-items: flex-start;">
					<i>￥</i>
					<view class="flex_c" v-if="vip_status == 1 && circle_info.type == 3">
						<text>{{ (pay_item.service_price * goods_discount).toFixed(2) }}</text>
						<text
							style="font-size: 28rpx;color: #FD2A53;margin-top: 12rpx;">VIP优惠:{{ (pay_item.service_price * (1-goods_discount)).toFixed(2) }}</text>
					</view>
					<text v-else>{{ pay_item.service_price }}</text>
				</view>
				<view class="pay_type">

					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>


				</view>
				<view class="btn" @click="toPay">确认支付</view>
			</view>
		</u-popup>

		<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_last" @close="to_pay_last = false"
			bgColor="transparent">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price">
					<i>￥</i>
					<text>{{ Number(fare).toFixed(2) || 0 }}</text>
				</view>
				<view class="pay_type">

					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>


				</view>
				<view class="btn" @click="toPayComplateOrder">确认支付</view>
			</view>
		</u-popup>

		<view style="padding-top: 16rpx;">
			<u-loadmore v-if="total != 0" :status="total > list.length ? 'loading' : 'nomore' " />
		</view>


	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty,
		},
		data() {
			return {
				// 1=未支付,2=待接单,3=待服务,4=服务中,5=已完成,6=已评价,7=已退款
				status: 0,

				type: 1,

				page: 1,
				total: 0,
				list: [],


				key: '',

				show_select: false,

				start_show: false,
				end_show: false,

				start: 0,
				end: 0,

				show: false,

				category_pid: 0,
				category_pname: '',
				category_id: 0,
				category_name: '',
				// 产品分类
				columns: [
					[],
					[]
				],

				now: 0,

				pay_show: false,
				return_show: false,

				// 退款订单ID
				return_order: {
					return_order_id: 0,
					return_msg: 0,
					return_price: 0,
				},

				to_pay_show: false,
				pay_type: 1,
				pay_item: {},
				flag: true,

				// 路费
				fare: '',
				// 支付尾款数据
				complate_item: {},
				to_pay_last: false,

				order_id: 0,

				vip_status: 0,

				circle_info: {},

				goods_discount: 0,
				
				
			}
		},
		methods: {
			onTab(e) {
				this.status = e;
				this.refreshList();
			},

			onType(e) {
				this.type = e;
				this.status = 0;
				this.refreshList();
			},

			onSearch() {
				this.refreshList();
			},

			getList() {
				if (this.type == 1) {
					if (this.start == 0 || this.end == 0) {
						var time = ``
					} else {
						var time =
							`${uni.$u.timeFormat(this.start, 'yyyy-mm-dd hh:MM:ss')} - ${uni.$u.timeFormat(this.end, 'yyyy-mm-dd hh:MM:ss')}`
					}
					this.$post('/order/getOrderList', {
						time: time,
						status: this.status,
						category_pid: this.category_pid,
						category_id: this.category_id,
						key: this.key,
						page: this.page,
					}, true, () => {
						uni.stopPullDownRefresh();
					}).then(res => {
						uni.stopPullDownRefresh();
						this.total = res.data.total;
						this.list.push(...res.data.data);
					})
				} else if (this.type == 2) {
					this.$post('/loyou/getApplyLog', {
						page: this.page,
						type: 0,
					}, true, () => {
						uni.stopPullDownRefresh();
					}).then(res => {
						uni.stopPullDownRefresh();
						this.total = res.data.total;
						this.list.push(...res.data.data);
					})
				} else {

				}
			},

			// 刷新
			refreshList() {
				this.page = 1;
				this.list = [];
				this.getList();
			},

			getProductTags() {
				this.$get('/category/getGoodsType').then(res => {
					this.storeType = res.data;
					res.data.forEach((element) => {
						this.columns[0].push({
							"name": element.name,
							"pid": element.pid,
							"id": element.id,
						});
					})
					this.columns[1] = res.data[0].child;
				})
			},

			onColumnsComfirm(e) {
				this.category_pname = e.value[0].name;
				this.category_name = e.value[1].name;
				this.category_pid = e.value[0].id;
				this.category_id = e.value[1].id;
				this.kefu = e.value[1].kefu;
				this.show = false;
			},

			onColumnsChange(e) {
				if (e.columnIndex == 0) {
					var picker = this.$refs.uPicker;
					picker.setColumnValues(1, this.storeType[e.index].child)
				}
			},

			onEnd() {
				if (!this.start) {
					return this.$util.msg('请先选择开始时间')
				}
				this.end_show = true;
			},

			confirmStart(e) {
				this.start = e.value;
				this.start_show = false;
			},

			confirmEnd(e) {
				this.end = e.value;
				this.end_show = false;
			},

			onConfirmSelect() {
				this.refreshList();
				this.start_show = false;
				this.end_show = false;
				this.show_select = false;
			},

			onResetSelect() {
				this.start = 0;
				this.end = 0;
				this.category_pid = 0;
				this.category_id = 0;
				this.key = '';
				this.refreshList();
				this.start_show = false;
				this.end_show = false;
				this.show_select = false;
			},

			// 取消订单
			closeOrder(item) {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: model => {
						if (model.confirm) {
							this.$get('/order/closeOrder', {
								order_id: item.id,
							}).then(res => {
								this.refreshList();
							})
						}
					}
				})
			},

			// 点击退款
			onReturn(item) {
				this.return_order.return_order_id = item.id;
				this.return_order.return_price = '特别注意';

				// if (item.kefu == 1) {
				// 	this.return_order.return_msg = '技师已接单正在赶去的路上，请耐心等待';
				// } else {
				this.return_order.return_msg = '是否确认退款';
				// }

				this.return_show = true;
			},

			// 退款
			returnOrder() {
				this.$get('/order/returnOrder', {
					order_id: this.return_order.return_order_id,
				}).then(res => {
					this.return_show = false;
					this.refreshList();
					this.$util.msg(res.msg);
				});
			},

			// 投诉
			toComplate(item) {
				this.$native.toComplate(item.id);
			},

			buyAgain(item) {
				this.$util.toUrl(
					`/pages/create/create?goods_id=${item.goods_id}&provider_id=${item.provider_id}&store_id=${item.store_id}&popularize_id=${0}&kefu=${item.kefu}&circle_id=${item.circle_id}&from_web=1`
				);
			},

			// 支付相关
			onPay(item) {
				this.pay_item = item;
				this.$get('/circle.circle_vip/getAnmoVipConfig', {
					circle_id: this.pay_item.circle_id
				}).then(res => {
					this.to_pay_show = true;
					this.vip_status = 0;
					var is_vip = res.data.member_info.is_vip || 0;
					var config_type = res.data.member_info.config_type || 0;
					this.circle_info = res.data.circle_info;
					this.goods_discount = res.data.goods_discount / 100;

					if (is_vip == 1) {
						// if (['vip_year_price', 'vip_forever_price'].includes(config_type)) {
						this.vip_status = 1;
						// }
					}
				});
			},

			toPay() {
				// if (!this.flag) {
				// 	return;
				// }
				// this.flag = false;

				// if (this.pay_item.kefu == 1) {
				// 	this.buyAnmo(this.pay_item.id);
				// } else {
				this.buyShiwu(this.pay_item.id);
				// }
			},
			// 按摩支付
			buyAnmo(order_id) {
				// fare：路费
				// step：支付步骤【0：非按摩商品，1：按摩商品支付定金，2：按摩商品支付尾款】
				this.order_id = order_id;
				this.$native.orderPay({
					order_id: order_id,
					pay_type: this.pay_type,
					type: 1
				});
			},

			// 实物支付
			buyShiwu(order_id) {
				this.order_id = order_id;
				// fare：路费
				// step：支付步骤【0：非按摩商品，1：按摩商品支付定金，2：按摩商品支付尾款】
				this.$native.orderPay({
					order_id: order_id,
					pay_type: this.pay_type,
					type: 1
				});
			},

			paySuccess() {
				this.to_pay_show = false;
				this.flag = true;
				this.fare = '';
				this.to_pay_last = false;
				this.getPayStatus();
			},

			payFail() {
				this.$util.msg('用户取消支付');
				this.flag = true;
				this.to_pay_last = false;
			},

			// 支付尾款 或 结束订单
			complateOrder(item) {
				this.order_id = item.id;
				// if (item.kefu == 1) {
				// 	// this.complate_item = item;
				// 	// this.pay_show = true;
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请确保技师完成服务后进行收货',
				// 		success: model => {
				// 			if (model.confirm) {
				// 				this.$get('/order/finishOrder', {
				// 					order_id: item.id
				// 				}).then(res => {
				// 					this.refreshList();
				// 				});
				// 			}
				// 		}
				// 	});
				// } else {

				uni.showModal({
					title: '提示',
					content: '请确保收到商品后进行收货',
					success: model => {
						if (model.confirm) {
							this.$get('/order/finishOrder', {
								order_id: item.id
							}).then(res => {
								this.refreshList();
							});
						}
					}
				});
				// }
			},

			toPayLast() {
				this.pay_show = false;
				this.to_pay_last = true;
			},

			toPayComplateOrder() {
				this.order_id = this.complate_item.id;
				// fare：路费
				// step：支付步骤【0：非按摩商品，1：按摩商品支付定金，2：按摩商品支付尾款】
				this.$native.orderPay({
					order_id: this.order_id,
					pay_type: this.pay_type,
					type: 1
				});
			},

			// 运费输入框
			inputVerGame(e) {
				var exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				if (!exp.test(e.detail.value)) {

					this.$nextTick(() => {
						let value = e.detail.value;
						// 移除非数字和点
						value = value.replace(/[^\d.]/g, '');
						// 限制只能有一个小数点
						value = value.replace(/^\./g, '');
						value = value.replace(/\.{2,}/g, '.');
						// 限制只能输入两位小数
						value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
						value = value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
						// 更新输入框的值
						this.fare = value;
					});

					return this.$util.msg('请输入正确的金额');
				}
			},

			getPayStatus() {
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id,
					// type 4 推广
					type: 1,
				}, false, () => {
					this.refreshList();
				}).then(res => {
					this.refreshList();
				});
			},

			getPayStatusAgain() {
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id,
					// type 4 推广
					type: 1,
				}, false);
			},

			toActiveContent(item) {
				this.$util.toUrl(`/pages/order/activecontent?id=${item.apply_id}`)
			},

			returnActive(item) {
				this.$util.toUrl(`/pages/order/activereturn?leyou_id=${item.id}&apply_id=${item.apply_id}`);
			},

			// 是否展示活动退款
			getShowStatus(item) {
				var now = new Date();
				var end_time = item.end_time * 1000;
				if (end_time <= now) {
					return false;
				} else {
					return true;
				}
			},

			getToken(map) {
				var no_login = false;
				if (!uni.getStorageSync('token')) {
					no_login = true;
				}
				var data = JSON.parse(map);
				uni.setStorageSync('token', data.token);
				uni.setStorageSync('cid', data.cid);
				uni.setStorageSync('terminal', data.terminal);

				if (no_login) {
					this.refreshList();
				}
			},

			toReward(item) {
				this.$native.toRewardPage(item.provider_id, item.id, item.circle_id, item.store_id);
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			
			this.getProductTags();
			this.now = new Date().getTime();

			window.paySuccess = this.paySuccess;
			window.payFail = this.payFail;
			window.getPayStatusAgain = this.getPayStatusAgain;
			window.getToken = this.getToken;

		},

		onShow() {
			this.refreshList();
		},

		onPullDownRefresh() {
			this.refreshList();
		},

		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getList();
			}
		},

	}
</script>

<style lang="less" scoped>
	.order {
		padding: 20rpx 32rpx 30rpx;
		min-height: 100vh;
		background: #FFF;
	}

	.nav-title {
		flex: 1;
		font-weight: 500;
		font-size: 32rpx;
		color: #131313;
		line-height: 44rpx;
	}

	.nav {
		padding-top: var(--paging-head-top);
		box-sizing: content-box;
		height: 100rpx;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFF;
		z-index: 99;

		.search {
			padding-right: 24rpx;
			flex: 1;
			height: 72rpx;
			background: #F3F3F3;
			border-radius: 36rpx;
		}

		.back {
			padding: 10rpx 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.nav_box {
		padding-top: var(--paging-head-top);
		height: 100rpx;
		box-sizing: content-box;
	}

	.scroll_tab {
		width: calc(100vw - 64rpx);
		position: sticky;
		top: calc(var(--paging-head-top) + 100rpx);
		z-index: 99;
		left: 0;
	}

	.tab {
		padding: 10rpx 8rpx;
		background: #FFF;

		.tab_item {
			flex-shrink: 0;
			padding: 0 24rpx;

			text {
				font-size: 28rpx;
				color: #666666;
			}

			.select_bg {
				height: 12rpx;
				background: transparent;
			}

			#select {
				background: linear-gradient(118deg, #FD2A53 0%, rgba(255, 255, 255, .1) 100%);
			}
		}
	}

	.type_tab {
		.type_item {
			width: 128rpx;
			height: 48rpx;
			background: #F3F3F3;
			border-radius: 24rpx;
			margin-right: 16rpx;

			text {
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
			}
		}

		#select {
			background: #FFEAEE;

			text {
				color: #FD2A53;
			}
		}
	}

	.list {
		.item {
			position: relative;
			margin-top: 40rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 2rpx solid #EEEEEE;

			.left {
				flex: 1;

				.image {
					flex-shrink: 0;
					width: 128rpx;
					height: 128rpx;
					border-radius: 8rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 128rpx;
						height: 128rpx;
						color: #ECECF4;
					}
				}

				.name {
					flex: 1;
					overflow: hidden;

					view {
						font-weight: 500;
						font-size: 32rpx;
						color: #131313;
						margin-bottom: 8rpx;
					}

					.text {
						font-size: 24rpx;
						color: #999999;
					}

					.right {
						font-size: 26rpx;
						color: #FD2A53;
					}

					.tousu_status {
						width: 40rpx;
						height: 40rpx;
					}

					.price {
						text {
							font-weight: 600;
							font-size: 40rpx;
							color: #131313;
						}

						i {
							font-weight: 600;
							font-size: 28rpx;
							color: #131313;
							font-style: normal;
						}
					}
				}
			}

			.btn_view {
				margin-top: 30rpx;
				flex-direction: row-reverse;

				view {
					width: 168rpx;
					height: 64rpx;
					border-radius: 32rpx;
					font-size: 28rpx;
					line-height: 62rpx;
					text-align: center;
					margin-left: 24rpx;
				}

				.r {
					background: #FFF;
					color: #FD2A53;
					border: 2rpx solid #FD2A53;
				}

				.y {
					background: #FFF;
					color: #FBA219;
					border: 2rpx solid #FBA219;
				}

				.b {
					background: #FFF;
					color: #131313;
					border: 2rpx solid #CCC;
				}
			}
		}
	}

	.select_box {
		padding: 0 32rpx 60rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.header {
			height: 80rpx;

			.icon {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}
		}

		.title {
			margin: 48rpx 0 32rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #131313;
		}

		.time_box {
			.time_item {
				width: 312rpx;
				height: 72rpx;
				padding: 0 16rpx;
				background: #F7F7F7;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #999999;
				text-align: center;
				line-height: 72rpx;
			}

			.line {
				width: 24rpx;
				height: 4rpx;
				background: #CCCCCC;
			}
		}

		.btn_box {
			margin-top: 120rpx;

			.btn_item {
				width: 332rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.cancel {
				background: #F1F1F1;
				color: #131313;
			}

			.confirm {
				background: #FD2A53;
				color: #FFF;
			}
		}

	}

	.pay_popup {
		.icon {
			position: relative;
			z-index: 2;

			image {
				width: 112rpx;
				height: 112rpx;
			}
		}

		.content {
			width: 616rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			margin-top: -48rpx;
			padding: 88rpx 56rpx 48rpx;
			position: relative;

			.header {
				position: absolute;
				top: 16rpx;
				right: 16rpx;
				z-index: 3;
			}

			.title {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}

			.price {
				width: 100%;
				margin: 32rpx 0;

				.item {
					text {
						font-size: 26rpx;
						color: #666666;
						line-height: 36rpx;
						margin-bottom: 8rpx;
					}

					view {
						font-weight: 500;
						font-size: 32rpx;
						color: #131313;
						line-height: 44rpx;
					}

					input {
						width: 176rpx;
						height: 64rpx;
						background: #F1F1F1;
						border-radius: 16rpx;
						font-size: 28rpx;
						color: #333;
						line-height: 64rpx;
						text-align: center;
					}
				}
			}

			.pay_popup_btn {
				width: 480rpx;
				height: 96rpx;
				background: #FD2A53;
				border-radius: 56rpx;
				padding-top: 12rpx;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}

				view {
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
		}


	}

	.return_popup {
		.icon {
			position: relative;
			z-index: 2;

			image {
				width: 112rpx;
				height: 112rpx;
			}
		}

		.content {
			width: 616rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			margin-top: -48rpx;
			padding: 88rpx 44rpx 48rpx;

			.title {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}

			.text {
				width: 528rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				text-align: center;
				margin: 24rpx 0 48rpx;
			}

			.return_popup_btn {
				width: 100%;

				view {
					width: 248rpx;
					height: 88rpx;
					border-radius: 44rpx;
					font-size: 28rpx;
					line-height: 88rpx;
					text-align: center;
				}

				.b {
					background: #F1F1F1;
					color: #333333;
				}

				.r {
					background: #FD2A53;
					color: #FFFFFF;
				}

			}
		}


	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.price {
			margin: 34rpx 0 24rpx;

			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;

			.item {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}
</style>